<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档笔记列表</title>

<!-- 引入bootstrap样式 -->
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link
	href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css"
	rel="stylesheet">

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script
	src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script
	src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>



</head>
<body>
	<div>
		<table class="table table-hover" id="cusTable" data-pagination="false"
			data-show-refresh="false" data-show-toggle="false"
			data-showColumns="false">
			<thead>
				<tr>
					<td data-field="id" style="display: none"></td>
					<th data-field="title">标题</th>
					<th data-field="note">内容</th>
					<th data-field="time">时间</th>
					<th class="col-xs-2" data-field="action"
						data-formatter="actionFormatter" data-events="actionEvents">操作</th>
				</tr>
			</thead>
		</table>
	</div>
</body>


<script type="text/javascript">
	$(document).ready(function() {
		//调用函数，初始化表格  
		initTable();
	});

	function initTable() {
		//先销毁表格  
		$('#cusTable').bootstrapTable('destroy');
		//初始化表格,动态从服务器加载数据  
		$("#cusTable").bootstrapTable({
			method : "get", //使用get请求到服务器获取数据  
			url : "./notedata",//获取数据的Servlet地址  ${pageContext.request.contextPath}
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			striped : true, //表格显示条纹  
			pagination : true, //启动分页  
			pageSize : 5, //每页显示的记录数  
			pageNumber : 1, //当前第几页  
			pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
			search : true, //是否启用查询  
			showRefresh : true, //显示刷新按钮  
			sidePagination : "client", //表示客户端分页  
			onLoadSuccess : function(data) { //加载成功时执行  
				//alert("加载成功!" + data);
			},
			onLoadError : function(data) { //加载失败时执行  
				//alert("加载失败!" + data);
			}
		});
	}

	function actionFormatter(val, row, index) {
		return '<a class="mod tc" >修改</a> ';
	}

	window.actionEvents = {
		'click .mod' : function(e, value, row, index) {
			window.open("./update?id=" + row.id, "_self");
		}
	}
</script>

</html>